<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li v-for="(item, index) in msg" :key="index">{{item}}</li>
    </ul>
    <h2>Ecosystem</h2>
    <el-button type="text">{{msg}}</el-button>
    <!-- <Small></Small> -->
     <!-- <el-input v-bind:value="msg" @input="msg = $event.target.value"></el-input> -->
     <!-- <input
        v-bind:value="msg"
        v-on:input="msg = $event.target.value"
      >
     <select v-model="selected" multiple style="width: 50px;">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    {{selected}} -->
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
// import Small from '@/components/common/small.js'
export default {
  name: 'HelloWorld',
  components: {
    // Small
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      img: [
        'https://cloudapi.qiyuesuo.com/user/avatar/image/2518613818771252169'
      ],
      chartData: ['衬衫', 'dsf', 'dfasd'],
      dampData: [5, 20, 36],
      selected: []
    }
  },
  methods: {
    drawChart: function () {
      let myChart = this.$echarts.init(this.$refs.chart)
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: this.chartData
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.dampData
        }]
      })
    }
  },
  computed: {
    //
  },
  mounted () {
    this.drawChart()
  },
  render: function (createElement) {
    return createElement('h1', 'shiy')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.chart{
  width: 100%;
  height: 300px;
}
</style>
